ஜாவாஸ்கிரிப்ட் ரியாக்டிவ் புரோகிராமிங்: RxJS பேட்டர்ன்கள் மற்றும் அப்சர்வேபிள் ஸ்ட்ரீம்களில் தேர்ச்சி பெறுதல்

நவீன வலை மற்றும் மொபைல் பயன்பாட்டு மேம்பாட்டின் ஆற்றல்மிக்க உலகில், ஒத்திசைவற்ற செயல்பாடுகளைக் கையாள்வதும், சிக்கலான தரவு ஸ்ட்ரீம்களைத் திறமையாக நிர்வகிப்பதும் மிக முக்கியமானது. ரியாக்டிவ் புரோகிராமிங், அதன் முக்கிய கருத்தான அப்சர்வேபிள்களுடன், இந்தச் சவால்களை எதிர்கொள்ள ஒரு சக்திவாய்ந்த மாதிரியை வழங்குகிறது. இந்த வழிகாட்டி, RxJS (ஜாவாஸ்கிரிப்ட்டிற்கான ரியாக்டிவ் நீட்டிப்புகள்) பயன்படுத்தி ஜாவாஸ்கிரிப்ட் ரியாக்டிவ் புரோகிராமிங் உலகிற்குள் ஆழமாகச் செல்கிறது. இது உலகளவில் பதிலளிக்கக்கூடிய மற்றும் அளவிடக்கூடிய பயன்பாடுகளை உருவாக்குவதற்கான அடிப்படைக் கருத்துகள், நடைமுறை முறைகள் மற்றும் மேம்பட்ட நுட்பங்களை ஆராய்கிறது.

ரியாக்டிவ் புரோகிராமிங் என்றால் என்ன?

ரியாக்டிவ் புரோகிராமிங் (RP) என்பது ஒரு அறிவிப்பு நிரலாக்க முறையாகும், இது ஒத்திசைவற்ற தரவு ஸ்ட்ரீம்கள் மற்றும் மாற்றங்களின் பரவலுடன் தொடர்புடையது. இதை ஒரு எக்செல் விரிதாள் போல நினைத்துப் பாருங்கள்: நீங்கள் ஒரு கலத்தின் மதிப்பை மாற்றும்போது, அதைச் சார்ந்த அனைத்து கலங்களும் தானாகவே புதுப்பிக்கப்படும். RP-யில், தரவு ஸ்ட்ரீம் என்பது விரிதாள், மற்றும் கலங்கள் அப்சர்வேபிள்கள். ரியாக்டிவ் புரோகிராமிங், மாறிகள், பயனர் உள்ளீடுகள், பண்புகள், கேச்கள், தரவுக் கட்டமைப்புகள் போன்ற அனைத்தையும் ஒரு ஸ்ட்ரீமாகக் கருத உங்களை அனுமதிக்கிறது.

ரியாக்டிவ் புரோகிராமிங்கில் உள்ள முக்கிய கருத்துகள்:

• அப்சர்வேபிள்கள் (Observables): காலப்போக்கில் தரவு அல்லது நிகழ்வுகளின் ஒரு ஸ்ட்ரீமைக் குறிக்கின்றன.
• அப்சர்வர்கள் (Observers): வெளியிடப்பட்ட மதிப்புகளைப் பெறவும் எதிர்வினையாற்றவும் அப்சர்வேபிள்களுக்கு சப்ஸ்கிரைப் செய்கின்றன.
• ஆபரேட்டர்கள் (Operators): அப்சர்வேபிள் ஸ்ட்ரீம்களை மாற்றுதல், வடித்தல், இணைத்தல் மற்றும் கையாளுதல் செய்கின்றன.
• ஷெட்யூலர்கள் (Schedulers): அப்சர்வேபிள் செயல்பாட்டின் ஒரேநேரச் செயலாக்கத்தையும் நேரத்தையும் கட்டுப்படுத்துகின்றன.

ரியாக்டிவ் புரோகிராமிங்கை ஏன் பயன்படுத்த வேண்டும்? இது குறியீட்டின் வாசிப்புத்திறன், பராமரிப்புத்திறன் மற்றும் சோதிக்கும் திறனை மேம்படுத்துகிறது, குறிப்பாக சிக்கலான ஒத்திசைவற்ற சூழ்நிலைகளைக் கையாளும்போது. இது ஒரேநேரச் செயலாக்கத்தை திறமையாகக் கையாளுகிறது மற்றும் 'கால்பேக் ஹெல்' (callback hell)-ஐத் தடுக்க உதவுகிறது.

RxJS அறிமுகம்

RxJS (ஜாவாஸ்கிரிப்ட்டிற்கான ரியாக்டிவ் நீட்டிப்புகள்) என்பது அப்சர்வேபிள் சீக்வென்ஸ்களைப் பயன்படுத்தி ஒத்திசைவற்ற மற்றும் நிகழ்வு அடிப்படையிலான நிரல்களை உருவாக்குவதற்கான ஒரு லைப்ரரி ஆகும். இது அப்சர்வேபிள் ஸ்ட்ரீம்களை மாற்றுவதற்கும், வடிகட்டுவதற்கும், இணைப்பதற்கும், மற்றும் கட்டுப்படுத்துவதற்கும் ஒரு விரிவான ஆபரேட்டர்களை வழங்குகிறது, இது ரியாக்டிவ் பயன்பாடுகளை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாக அமைகிறது.

RxJS, ReactiveX API-ஐ செயல்படுத்துகிறது, இது .NET, ஜாவா, பைதான் மற்றும் ரூபி உள்ளிட்ட பல்வேறு நிரலாக்க மொழிகளுக்குக் கிடைக்கிறது. இது டெவலப்பர்கள் வெவ்வேறு தளங்கள் மற்றும் சூழல்களில் ஒரே மாதிரியான ரியாக்டிவ் புரோகிராமிங் கருத்துகளையும் பேட்டர்ன்களையும் பயன்படுத்த அனுமதிக்கிறது.

RxJS பயன்படுத்துவதன் முக்கிய நன்மைகள்:

• அறிவிப்பு அணுகுமுறை (Declarative Approach): ஒரு செயலை எப்படிச் செய்வது என்பதை விட, என்ன செய்ய வேண்டும் என்பதை வெளிப்படுத்தும் குறியீட்டை எழுதுங்கள்.
• ஒத்திசைவற்ற செயல்பாடுகள் எளிதாக்கப்பட்டன: நெட்வொர்க் கோரிக்கைகள், பயனர் உள்ளீடு மற்றும் நிகழ்வு கையாளுதல் போன்ற ஒத்திசைவற்ற பணிகளைக் கையாள்வதை எளிதாக்குகிறது.
• கலவை மற்றும் மாற்றம் (Composition and Transformation): தரவு ஸ்ட்ரீம்களைக் கையாளவும் இணைக்கவும் பரந்த அளவிலான ஆபரேட்டர்களைப் பயன்படுத்தலாம்.
• பிழை கையாளுதல் (Error Handling): நெகிழ்வான பயன்பாடுகளுக்கு வலுவான பிழை கையாளும் வழிமுறைகளைச் செயல்படுத்தலாம்.
• ஒரேநேரச் செயலாக்க மேலாண்மை (Concurrency Management): ஒத்திசைவற்ற செயல்பாடுகளின் ஒரேநேரச் செயலாக்கத்தையும் நேரத்தையும் கட்டுப்படுத்தலாம்.
• பன்மொழி இணக்கத்தன்மை (Cross-Platform Compatibility): வெவ்வேறு நிரலாக்க மொழிகளில் ReactiveX API-ஐப் பயன்படுத்திக் கொள்ளலாம்.

RxJS இன் அடிப்படைகள்: அப்சர்வேபிள்கள், அப்சர்வர்கள் மற்றும் சப்ஸ்கிரிப்ஷன்கள்

அப்சர்வேபிள்கள் (Observables)

ஒரு அப்சர்வேபிள், காலப்போக்கில் தரவு அல்லது நிகழ்வுகளின் ஒரு ஸ்ட்ரீமைக் குறிக்கிறது. இது அதன் சந்தாதாரர்களுக்கு மதிப்புகள், பிழைகள் அல்லது ஒரு நிறைவு சிக்னலை வெளியிடுகிறது.

அப்சர்வேபிள்களை உருவாக்குதல்:

நீங்கள் பல்வேறு முறைகளைப் பயன்படுத்தி அப்சர்வேபிள்களை உருவாக்கலாம்:

• `Observable.create()`: தனிப்பயன் அப்சர்வேபிள் லாஜிக்கை வரையறுக்க அதிக நெகிழ்வுத்தன்மையை வழங்குகிறது.
• `Observable.fromEvent()`: DOM நிகழ்வுகளிலிருந்து (எ.கா., பொத்தான் கிளிக், உள்ளீட்டு மாற்றங்கள்) ஒரு அப்சர்வேபிளை உருவாக்குகிறது.
• `Observable.ajax()`: ஒரு HTTP கோரிக்கையிலிருந்து ஒரு அப்சர்வேபிளை உருவாக்குகிறது.
• `Observable.interval()`: ஒரு குறிப்பிட்ட இடைவெளியில் வரிசை எண்களை வெளியிடும் ஒரு அப்சர்வேபிளை உருவாக்குகிறது.
• `Observable.timer()`: ஒரு குறிப்பிட்ட தாமதத்திற்குப் பிறகு ஒரு ஒற்றை மதிப்பை வெளியிடும் ஒரு அப்சர்வேபிளை உருவாக்குகிறது.
• `Observable.of()`: ஒரு நிலையான மதிப்புகளின் தொகுப்பை வெளியிடும் ஒரு அப்சர்வேபிளை உருவாக்குகிறது.
• `Observable.from()`: ஒரு வரிசை, ப்ராமிஸ் அல்லது இட்டரேபிளிலிருந்து ஒரு அப்சர்வேபிளை உருவாக்குகிறது.

எடுத்துக்காட்டு:

            
import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {
    subscriber.next(4);
    subscriber.complete();
  }, 1000);
});

            

              
                Copy
              
            
          

அப்சர்வர்கள் (Observers)

ஒரு அப்சர்வர் என்பது ஒரு அப்சர்வேபிளுக்கு சப்ஸ்கிரைப் செய்து, வெளியிடப்பட்ட மதிப்புகள், பிழைகள் அல்லது நிறைவு சிக்னல் பற்றிய அறிவிப்புகளைப் பெறும் ஒரு ஆப்ஜெக்ட் ஆகும்.

ஒரு அப்சர்வர் பொதுவாக மூன்று மெத்தடுகளை வரையறுக்கிறது:

• `next(value)`: அப்சர்வேபிள் ஒரு மதிப்பை வெளியிடும்போது அழைக்கப்படுகிறது.
• `error(err)`: அப்சர்வேபிள் ஒரு பிழையை எதிர்கொள்ளும்போது அழைக்கப்படுகிறது.
• `complete()`: அப்சர்வேபிள் வெற்றிகரமாக முடிந்ததும் அழைக்கப்படுகிறது.

எடுத்துக்காட்டு:

            
const observer = {
  next: value => console.log('Observer got a value: ' + value),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};

            

              
                Copy
              
            
          

சப்ஸ்கிரிப்ஷன்கள் (Subscriptions)

ஒரு சப்ஸ்கிரிப்ஷன், ஒரு அப்சர்வேபிளுக்கும் ஒரு அப்சர்வருக்கும் இடையேயான இணைப்பைக் குறிக்கிறது. ஒரு அப்சர்வர் ஒரு அப்சர்வேபிளுக்கு சப்ஸ்கிரைப் செய்யும்போது, ஒரு சப்ஸ்கிரிப்ஷன் ஆப்ஜெக்ட் திரும்பக் கிடைக்கிறது. இந்த சப்ஸ்கிரிப்ஷன் ஆப்ஜெக்ட், அப்சர்வேபிளிலிருந்து அன்சப்ஸ்கிரைப் செய்ய உங்களை அனுமதிக்கிறது, மேலும் அறிவிப்புகளைத் தடுக்கிறது.

எடுத்துக்காட்டு:

            
const subscription = observable.subscribe(observer);

// Later:
subscription.unsubscribe();

            

              
                Copy
              
            
          

நினைவகக் கசிவுகளைத் தடுக்க அன்சப்ஸ்கிரைப் செய்வது மிகவும் முக்கியமானது, குறிப்பாக நீண்ட காலம் வாழும் அப்சர்வேபிள்கள் அல்லது DOM நிகழ்வுகளைக் கையாளும்போது.

முக்கியமான RxJS ஆபரேட்டர்கள்

RxJS, அப்சர்வேபிள் ஸ்ட்ரீம்களை மாற்றுவதற்கும், வடிகட்டுவதற்கும், இணைப்பதற்கும், மற்றும் கட்டுப்படுத்துவதற்கும் ஒரு விரிவான ஆபரேட்டர்களை வழங்குகிறது. இங்கே சில மிக முக்கியமான ஆபரேட்டர்கள்:

உருமாற்ற ஆபரேட்டர்கள் (Transformation Operators)

• `map()`: ஒவ்வொரு வெளியிடப்பட்ட மதிப்பிற்கும் ஒரு செயல்பாட்டைப் பயன்படுத்துகிறது மற்றும் மாற்றப்பட்ட மதிப்புகளுடன் ஒரு புதிய அப்சர்வேபிளைத் தருகிறது.
• `pluck()`: ஒவ்வொரு வெளியிடப்பட்ட ஆப்ஜெக்ட்டிலிருந்தும் ஒரு குறிப்பிட்ட பண்பை பிரித்தெடுக்கிறது.
• `scan()`: மூல அப்சர்வேபிளின் மீது ஒரு திரட்டிச் செயல்பாட்டைப் பயன்படுத்துகிறது மற்றும் ஒவ்வொரு இடைநிலை முடிவையும் தருகிறது. இயங்கும் மொத்தங்கள் அல்லது திரட்டல்களைக் கணக்கிடப் பயன்படும்.
• `buffer()`: வெளியிடப்பட்ட மதிப்புகளை ஒரு வரிசையில் சேகரித்து, ஒரு குறிப்பிட்ட அறிவிப்பாளர் அப்சர்வேபிள் ஒரு மதிப்பை வெளியிடும்போது அந்த வரிசையை வெளியிடுகிறது.
• `bufferCount()`: வெளியிடப்பட்ட மதிப்புகளை ஒரு வரிசையில் சேகரித்து, ஒரு குறிப்பிட்ட எண்ணிக்கையிலான மதிப்புகள் சேகரிக்கப்பட்டதும் அந்த வரிசையை வெளியிடுகிறது.
• `toArray()`: வெளியிடப்பட்ட அனைத்து மதிப்புகளையும் ஒரு வரிசையில் சேகரித்து, மூல அப்சர்வேபிள் முடிந்ததும் அந்த வரிசையை வெளியிடுகிறது.

வடிகட்டுதல் ஆபரேட்டர்கள் (Filtering Operators)

• `filter()`: ஒரு குறிப்பிட்ட நிபந்தனையை பூர்த்தி செய்யும் மதிப்புகளை மட்டுமே வெளியிடுகிறது.
• `take()`: மூல அப்சர்வேபிளிலிருந்து முதல் N மதிப்புகளை மட்டுமே வெளியிடுகிறது.
• `takeLast()`: மூல அப்சர்வேபிள் முடிந்ததும், அதிலிருந்து கடைசி N மதிப்புகளை மட்டுமே வெளியிடுகிறது.
• `skip()`: மூல அப்சர்வேபிளிலிருந்து முதல் N மதிப்புகளைத் தவிர்த்து, மீதமுள்ள மதிப்புகளை வெளியிடுகிறது.
• `debounceTime()`: ஒரு குறிப்பிட்ட நேரம் புதிய மதிப்புகள் எதுவும் வெளியிடப்படாமல் கடந்த பின்னரே ஒரு மதிப்பை வெளியிடுகிறது. தேடல் பெட்டியில் தட்டச்சு செய்வது போன்ற பயனர் உள்ளீட்டு நிகழ்வுகளைக் கையாள இது பயனுள்ளதாக இருக்கும்.
• `distinctUntilChanged()`: முந்தைய வெளியிடப்பட்ட மதிப்பிலிருந்து வேறுபட்ட மதிப்புகளை மட்டுமே வெளியிடுகிறது.

இணைப்பு ஆபரேட்டர்கள் (Combination Operators)

• `merge()`: பல அப்சர்வேபிள்களை ஒரே அப்சர்வேபிளாக இணைக்கிறது, ஒவ்வொரு அப்சர்வேபிளிலிருந்தும் மதிப்புகள் வெளியிடப்படும்போது அவற்றை வெளியிடுகிறது.
• `concat()`: பல அப்சர்வேபிள்களை ஒரே அப்சர்வேபிளாக இணைக்கிறது, முந்தையது முடிந்த பிறகு ஒவ்வொரு அப்சர்வேபிளிலிருந்தும் மதிப்புகளை வரிசையாக வெளியிடுகிறது.
• `zip()`: பல அப்சர்வேபிள்களை ஒரே அப்சர்வேபிளாக இணைக்கிறது, ஒவ்வொரு அப்சர்வேபிளும் ஒரு மதிப்பை வெளியிடும்போது மதிப்புகளின் வரிசையை வெளியிடுகிறது.
• `combineLatest()`: பல அப்சர்வேபிள்களை ஒரே அப்சர்வேபிளாக இணைக்கிறது, எந்தவொரு அப்சர்வேபிளும் ஒரு மதிப்பை வெளியிடும்போதெல்லாம், ஒவ்வொரு அப்சர்வேபிளிலிருந்தும் சமீபத்திய மதிப்புகளின் வரிசையை வெளியிடுகிறது.
• `forkJoin()`: உள்ளீட்டு அப்சர்வேபிள்கள் அனைத்தும் முடியும் வரை காத்திருந்து, பின்னர் ஒவ்வொரு அப்சர்வேபிளாலும் வெளியிடப்பட்ட கடைசி மதிப்புகளின் வரிசையை வெளியிடுகிறது.

பிழை கையாளுதல் ஆபரேட்டர்கள் (Error Handling Operators)

• `catchError()`: மூல அப்சர்வேபிளால் வெளியிடப்பட்ட பிழைகளைப் பிடித்து, பிழைக்கு பதிலாக ஒரு புதிய அப்சர்வேபிளைத் தருகிறது.
• `retry()`: ஒரு பிழையை எதிர்கொண்டால், மூல அப்சர்வேபிளைக் குறிப்பிட்ட எண்ணிக்கையிலான முறை மீண்டும் முயற்சிக்கிறது.
• `retryWhen()`: ஒரு அறிவிப்பாளர் அப்சர்வேபிளின் அடிப்படையில் மூல அப்சர்வேபிளை மீண்டும் முயற்சிக்கிறது.

பயன்பாட்டு ஆபரேட்டர்கள் (Utility Operators)

• `tap()`: ஒவ்வொரு வெளியிடப்பட்ட மதிப்பிற்கும், மதிப்பை மாற்றாமல் ஒரு பக்க விளைவைச் செய்கிறது. பதிவு செய்தல் அல்லது பிழைத்திருத்தத்திற்குப் பயனுள்ளது.
• `delay()`: ஒவ்வொரு மதிப்பின் வெளியீட்டையும் ஒரு குறிப்பிட்ட நேரத்திற்கு தாமதப்படுத்துகிறது.
• `timeout()`: மூல அப்சர்வேபிள் ஒரு குறிப்பிட்ட நேரத்திற்குள் ஒரு மதிப்பை வெளியிடவில்லை என்றால் ஒரு பிழையை வெளியிடுகிறது.
• `share()`: ஒரு அடிப்படை அப்சர்வேபிளுக்கான ஒற்றை சப்ஸ்கிரிப்ஷனை பல சந்தாதாரர்களிடையே பகிர்ந்து கொள்கிறது. ஒரே அப்சர்வேபிளின் பல செயல்பாடுகளைத் தடுக்க இது பயனுள்ளதாக இருக்கும்.
• `shareReplay()`: ஒரு அடிப்படை அப்சர்வேபிளுக்கான ஒற்றை சப்ஸ்கிரிப்ஷனைப் பகிர்ந்து கொள்கிறது மற்றும் புதிய சந்தாதாரர்களுக்கு கடைசியாக வெளியிடப்பட்ட N மதிப்புகளை மீண்டும் இயக்குகிறது.

பொதுவான RxJS பேட்டர்ன்கள்

RxJS பொதுவான ஒத்திசைவற்ற புரோகிராமிங் சவால்களைச் சமாளிக்க சக்திவாய்ந்த பேட்டர்ன்களை வழங்குகிறது. இங்கே சில எடுத்துக்காட்டுகள்:

பயனர் உள்ளீட்டை டிபவுன்சிங் செய்தல் (Debouncing User Input)

தேடல் செயல்பாட்டைக் கொண்ட பயன்பாடுகளில், ஒவ்வொரு கீஸ்ட்ரோக்கிலும் API அழைப்புகளைச் செய்வதைத் தவிர்க்க விரும்பலாம். `debounceTime()` ஆபரேட்டர், பயனர் தட்டச்சு செய்வதை நிறுத்திய பிறகு, API அழைப்பைத் தூண்டுவதற்கு முன் ஒரு குறிப்பிட்ட காலத்திற்கு காத்திருக்க உங்களை அனுமதிக்கிறது.

            
import { fromEvent } from 'rxjs';
import { debounceTime, map, distinctUntilChanged } from 'rxjs/operators';

const searchBox = document.getElementById('search-box');

fromEvent(searchBox, 'keyup').pipe(
  map((event: any) => event.target.value),
  debounceTime(300), // Wait 300ms after each keystroke
  distinctUntilChanged() // Only if the value has changed
).subscribe(searchValue => {
  // Make API call with searchValue
  console.log('Performing search with:', searchValue);
});

            

              
                Copy
              
            
          

நிகழ்வுகளை த்ராட்லிங் செய்தல் (Throttling Events)

டிபவுன்சிங் போலவே, த்ராட்லிங்கும் ஒரு செயல்பாடு செயல்படுத்தப்படும் விகிதத்தைக் கட்டுப்படுத்துகிறது. ஒரு செயலற்ற காலத்திற்குப் பிறகு செயல்பாட்டைத் தாமதப்படுத்தும் டிபவுன்சிங் போலல்லாமல், த்ராட்லிங் ஒரு குறிப்பிட்ட கால இடைவெளியில் ஒரு செயல்பாட்டை ஒரு முறை மட்டுமே செயல்படுத்துகிறது. ஸ்க்ரோல் நிகழ்வுகள் அல்லது விண்டோ அளவு மாற்ற நிகழ்வுகள் போன்ற வேகமாக நிகழக்கூடிய நிகழ்வுகளைக் கையாள இது பயனுள்ளதாக இருக்கும்.

            
import { fromEvent } from 'rxjs';
import { throttleTime } from 'rxjs/operators';

const scrollEvent = fromEvent(window, 'scroll');

scrollEvent.pipe(
  throttleTime(200) // Execute at most once every 200ms
).subscribe(() => {
  // Handle scroll event
  console.log('Scrolling...');
});

            

              
                Copy
              
            
          

தரவை போலிங் செய்தல் (Polling Data)

ஒரு API-யிலிருந்து குறிப்பிட்ட கால இடைவெளியில் தரவைப் பெற `interval()`-ஐப் பயன்படுத்தலாம்.

            
import { interval } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';

const pollingInterval = interval(5000); // Poll every 5 seconds

pollingInterval.pipe(
  switchMap(() => ajax('/api/data'))
).subscribe(response => {
  // Process the data
  console.log('Data:', response.response);
});

            

              
                Copy
              
            
          

முக்கியமானது: முந்தைய கோரிக்கை முடிவடைவதற்குள் ஒரு புதிய கோரிக்கை தூண்டப்பட்டால், முந்தைய கோரிக்கையை ரத்து செய்ய `switchMap`-ஐப் பயன்படுத்தவும். இது ரேஸ் கண்டிஷன்களைத் தடுக்கிறது மற்றும் நீங்கள் சமீபத்திய தரவை மட்டுமே செயலாக்குவதை உறுதி செய்கிறது.

பல ஒத்திசைவற்ற செயல்பாடுகளைக் கையாளுதல்

`forkJoin()` என்பது பல ஒத்திசைவற்ற செயல்பாடுகள் முடிவடையும் வரை காத்திருந்து பின்னர் தொடர ஏற்றது. உதாரணமாக, ஒரு காம்போனென்டை ரெண்டர் செய்வதற்கு முன் பல API-களிலிருந்து தரவைப் பெறுதல்.

            
import { forkJoin } from 'rxjs';
import { ajax } from 'rxjs/ajax';

const api1 = ajax('/api/data1');
const api2 = ajax('/api/data2');

forkJoin([api1, api2]).subscribe(
  ([data1, data2]) => {
    // Process data from both APIs
    console.log('Data 1:', data1.response);
    console.log('Data 2:', data2.response);
  },
  error => {
    // Handle errors
    console.error('Error fetching data:', error);
  }
);

            

              
                Copy
              
            
          

மேம்பட்ட RxJS நுட்பங்கள்

சப்ஜெக்ட்கள் (Subjects)

சப்ஜெக்ட்கள் ஒரு சிறப்பு வகை அப்சர்வேபிளாகும், இது மதிப்புகளை பல அப்சர்வர்களுக்கு மல்டிகாஸ்ட் செய்ய அனுமதிக்கிறது. அவை அப்சர்வேபிள்கள் மற்றும் அப்சர்வர்கள் ஆகிய இரண்டுமாக உள்ளன, அதாவது நீங்கள் அவற்றுக்கு சப்ஸ்கிரைப் செய்யலாம் மற்றும் அவற்றுக்கு மதிப்புகளை வெளியிடவும் செய்யலாம்.

சப்ஜெக்ட்களின் வகைகள்:

• Subject: மதிப்பு வெளியிடப்பட்ட பிறகு சப்ஸ்கிரைப் செய்யும் சந்தாதாரர்களுக்கு மட்டுமே மதிப்புகளை வெளியிடுகிறது.
• BehaviorSubject: தற்போதைய மதிப்பு அல்லது ஒரு இயல்புநிலை மதிப்பை புதிய சந்தாதாரர்களுக்கு வெளியிடுகிறது.
• ReplaySubject: ஒரு குறிப்பிட்ட எண்ணிக்கையிலான மதிப்புகளைச் சேமித்து, அவற்றை புதிய சந்தாதாரர்களுக்கு மீண்டும் இயக்குகிறது.
• AsyncSubject: அப்சர்வேபிள் முடிந்ததும், அது வெளியிட்ட கடைசி மதிப்பை மட்டுமே வெளியிடுகிறது.

சப்ஜெக்ட்கள் காம்போனென்ட்கள் அல்லது சேவைகளுக்கு இடையில் தரவைப் பகிரவும், நிகழ்வு பஸ்களைச் செயல்படுத்தவும், அல்லது தனிப்பயன் அப்சர்வேபிள்களை உருவாக்கவும் பயனுள்ளவை.

ஷெட்யூலர்கள் (Schedulers)

ஷெட்யூலர்கள் அப்சர்வேபிள் செயல்பாட்டின் ஒரேநேரச் செயலாக்கத்தையும் நேரத்தையும் கட்டுப்படுத்துகின்றன. அவை அப்சர்வேபிள்கள் எப்போது, எப்படி மதிப்புகளை வெளியிட வேண்டும் என்பதைத் தீர்மானிக்கின்றன.

ஷெட்யூலர்களின் வகைகள்:

• `asapScheduler`: பணிகளை முடிந்தவரை விரைவில் இயக்க திட்டமிடுகிறது, ஆனால் தற்போதைய செயல்பாட்டுச் சூழலுக்குப் பிறகு.
• `asyncScheduler`: `setTimeout` பயன்படுத்தி பணிகளை ஒத்திசைவற்ற முறையில் இயக்க திட்டமிடுகிறது.
• `queueScheduler`: பணிகளை ஒரு வரிசையில் வரிசையாக இயக்க திட்டமிடுகிறது.
• `animationFrameScheduler`: அடுத்த பிரவுசர் ரீபெயின்ட்டுக்கு முன் பணிகளை இயக்க திட்டமிடுகிறது.

உங்கள் பயன்பாட்டின் செயல்திறன் மற்றும் பதிலளிக்கும் தன்மையைக் கட்டுப்படுத்த ஷெட்யூலர்கள் பயனுள்ளவை, குறிப்பாக CPU-தீவிர செயல்பாடுகள் அல்லது UI புதுப்பிப்புகளைக் கையாளும்போது.

தனிப்பயன் ஆபரேட்டர்கள் (Custom Operators)

மறுபயன்பாட்டு லாஜிக்கை உள்ளடக்கவும், குறியீட்டின் வாசிப்புத்திறனை மேம்படுத்தவும் உங்கள் சொந்த தனிப்பயன் ஆபரேட்டர்களை உருவாக்கலாம். தனிப்பயன் ஆபரேட்டர்கள் என்பவை ஒரு அப்சர்வேபிளை உள்ளீடாக எடுத்து, விரும்பிய மாற்றத்துடன் ஒரு புதிய அப்சர்வேபிளைத் தரும் செயல்பாடுகள் ஆகும்.

            
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

function doubleValues() {
  return (source: Observable) => {
    return source.pipe(
      map(value => value * 2)
    );
  };
}

const observable = Observable.of(1, 2, 3);

observable.pipe(
  doubleValues()
).subscribe(value => {
  console.log('Doubled value:', value);
});

            

              
                Copy
              
            
          

வெவ்வேறு ஃபிரேம்வொர்க்குகளில் RxJS

RxJS, ஆங்குலர், ரியாக்ட் மற்றும் வியூ.js உள்ளிட்ட பல்வேறு ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க்குகளில் பரவலாகப் பயன்படுத்தப்படுகிறது.

ஆங்குலர் (Angular)

ஆங்குலர், ஒத்திசைவற்ற செயல்பாடுகளைக் கையாளுவதற்கான அதன் முதன்மை வழிமுறையாக RxJS-ஐ ஏற்றுக்கொண்டுள்ளது, குறிப்பாக `HttpClient` மாட்யூலைப் பயன்படுத்தி HTTP கோரிக்கைகளுடன். ஆங்குலர் காம்போனென்ட்கள், தரவுப் புதுப்பிப்புகளைப் பெற சேவைகளால் வழங்கப்படும் அப்சர்வேபிள்களுக்கு சப்ஸ்கிரைப் செய்யலாம். RxJS ஆங்குலரின் சேஞ்ச் டிடெக்ஷன் சிஸ்டத்துடன் பெரிதும் ஒருங்கிணைக்கப்பட்டுள்ளது, இது UI புதுப்பிப்புகள் திறமையாக நிர்வகிக்கப்படுவதை உறுதி செய்கிறது.

ரியாக்ட் (React)

ஆங்குலரைப் போல இறுக்கமாக ஒருங்கிணைக்கப்படவில்லை என்றாலும், RxJS-ஐ ரியாக்ட் பயன்பாடுகளில் சிக்கலான நிலையை நிர்வகிக்கவும் ஒத்திசைவற்ற நிகழ்வுகளைக் கையாளவும் திறம்படப் பயன்படுத்தலாம். `rxjs-hooks` போன்ற லைப்ரரிகள், RxJS அப்சர்வேபிள்களை ரியாக்ட் காம்போனென்ட்களில் ஒருங்கிணைப்பதை எளிதாக்கும் ஹூக்குகளை வழங்குகின்றன. ரியாக்ட்டின் ஃபங்ஷனல் காம்போனென்ட் கட்டமைப்பு RxJS-இன் அறிவிப்பு பாணிக்கு நன்றாகப் பொருந்துகிறது.

வியூ.js (Vue.js)

RxJS-ஐ `vue-rx` போன்ற லைப்ரரிகளைப் பயன்படுத்தி அல்லது வியூ காம்போனென்ட்களுக்குள் நேரடியாக அப்சர்வேபிள்களைப் பயன்படுத்தி வியூ.js பயன்பாடுகளில் ஒருங்கிணைக்கலாம். ரியாக்ட்டைப் போலவே, வியூ.js-ம் ஒத்திசைவற்ற செயல்பாடுகள் மற்றும் தரவு ஸ்ட்ரீம்களை நிர்வகிப்பதற்கு RxJS-இன் கலக்கக்கூடிய மற்றும் அறிவிப்பு இயல்பிலிருந்து பயனடைகிறது. வியூவின் அதிகாரப்பூர்வ ஸ்டேட் மேலாண்மை லைப்ரரியான Vuex, மேலும் சிக்கலான ஸ்டேட் மேலாண்மை சூழ்நிலைகளுக்கு RxJS-உடன் இணைக்கப்படலாம்.

உலகளவில் RxJS-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

உலகளாவிய பார்வையாளர்களுக்காக RxJS பயன்பாடுகளை உருவாக்கும்போது, பின்வரும் சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

• பன்னாட்டுமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n): உங்கள் பயன்பாடு பல மொழிகள் மற்றும் பிராந்தியங்களை ஆதரிப்பதை உறுதிசெய்யவும். பயனரின் இருப்பிடத்தின் அடிப்படையில் உரை மொழிபெயர்ப்பு, தேதி/நேர வடிவமைப்பு மற்றும் எண் வடிவமைப்பைக் கையாள i18n லைப்ரரிகளைப் பயன்படுத்தவும். வெவ்வேறு தேதி வடிவங்கள் (எ.கா., MM/DD/YYYY vs DD/MM/YYYY) மற்றும் நாணய சின்னங்கள் குறித்து கவனமாக இருங்கள்.
• நேர மண்டலங்கள் (Time Zones): நேர மண்டலங்களைச் சரியாகக் கையாளவும். தேதிகள் மற்றும் நேரங்களை UTC வடிவத்தில் சேமித்து, அவற்றை பயனரின் உள்ளூர் நேர மண்டலத்திற்கு மாற்றி காண்பிக்கவும். நேர மண்டல மாற்றங்களை நிர்வகிக்க `moment-timezone` அல்லது `luxon` போன்ற லைப்ரரிகளைப் பயன்படுத்தவும்.
• கலாச்சாரக் கருத்தாய்வுகள்: முகவரி வடிவங்கள், தொலைபேசி எண் வடிவங்கள் மற்றும் பெயர் மரபுகள் போன்ற தரவுப் பிரதிநிதித்துவத்தில் உள்ள கலாச்சார வேறுபாடுகளைப் பற்றி அறிந்திருங்கள்.
• அணுகல்தன்மை (a11y): மாற்றுத்திறனாளிகள் உங்கள் பயன்பாட்டை அணுகக்கூடியதாக வடிவமைக்கவும். செமண்டிக் HTML-ஐப் பயன்படுத்தவும், படங்களுக்கு மாற்று உரையை வழங்கவும், உங்கள் பயன்பாடு கீபோர்டு மூலம் செல்லக்கூடியதாக இருப்பதை உறுதிசெய்யவும். பார்வைக் குறைபாடுள்ள பயனர்களைக் கருத்தில் கொண்டு சரியான வண்ண வேறுபாடு மற்றும் எழுத்துரு அளவுகளை உறுதிசெய்யவும்.
• செயல்திறன் (Performance): உங்கள் RxJS குறியீட்டை செயல்திறனுக்காக மேம்படுத்தவும், குறிப்பாக பெரிய தரவு ஸ்ட்ரீம்கள் அல்லது சிக்கலான மாற்றங்களைக் கையாளும்போது. பொருத்தமான ஆபரேட்டர்களைப் பயன்படுத்தவும், தேவையற்ற சப்ஸ்கிரிப்ஷன்களைத் தவிர்க்கவும், மற்றும் அப்சர்வேபிள்கள் இனி தேவைப்படாதபோது அன்சப்ஸ்கிரைப் செய்யவும். RxJS ஆபரேட்டர்களின் நினைவக நுகர்வு மற்றும் CPU பயன்பாட்டின் தாக்கத்தைக் கவனத்தில் கொள்ளுங்கள்.
• பிழை கையாளுதல் (Error Handling): பிழைகளை நளினமாகக் கையாளவும் பயன்பாட்டு செயலிழப்புகளைத் தடுக்கவும் வலுவான பிழை கையாளும் வழிமுறைகளைச் செயல்படுத்தவும். பயனருக்கு அவர்களின் உள்ளூர் மொழியில் தகவலறிந்த பிழைச் செய்திகளை வழங்கவும்.
• சோதனை (Testing): உங்கள் RxJS குறியீடு சரியாகச் செயல்படுவதை உறுதிசெய்ய விரிவான யூனிட் சோதனைகள் மற்றும் ஒருங்கிணைப்பு சோதனைகளை எழுதுங்கள். உங்கள் RxJS குறியீட்டைத் தனிமைப்படுத்தவும் வெவ்வேறு சூழ்நிலைகளைச் சோதிக்கவும் மாக்கிங் நுட்பங்களைப் பயன்படுத்தவும்.

முடிவுரை

RxJS, ஜாவாஸ்கிரிப்டில் ஒத்திசைவற்ற செயல்பாடுகளைக் கையாள்வதற்கும் சிக்கலான தரவு ஸ்ட்ரீம்களை நிர்வகிப்பதற்கும் ஒரு சக்திவாய்ந்த மற்றும் பல்துறை அணுகுமுறையை வழங்குகிறது. அப்சர்வேபிள்கள், அப்சர்வர்கள் மற்றும் சப்ஸ்கிரிப்ஷன்களின் அடிப்படைக் கருத்துகளைப் புரிந்துகொண்டு, அத்தியாவசிய RxJS ஆபரேட்டர்களில் தேர்ச்சி பெறுவதன் மூலம், உலகளாவிய பார்வையாளர்களுக்காக பதிலளிக்கக்கூடிய, அளவிடக்கூடிய மற்றும் பராமரிக்கக்கூடிய பயன்பாடுகளை நீங்கள் உருவாக்கலாம். நீங்கள் RxJS-ஐத் தொடர்ந்து ஆராய்ந்து, வெவ்வேறு பேட்டர்ன்கள் மற்றும் நுட்பங்களுடன் பரிசோதனை செய்து, அவற்றை உங்கள் குறிப்பிட்ட தேவைகளுக்கு ஏற்ப மாற்றியமைக்கும்போது, ரியாக்டிவ் புரோகிராமிங்கின் முழுத் திறனையும் திறந்து, உங்கள் ஜாவாஸ்கிரிப்ட் மேம்பாட்டுத் திறன்களை புதிய உயரங்களுக்கு உயர்த்துவீர்கள். அதன் அதிகரித்து வரும் தத்தெடுப்பு மற்றும் துடிப்பான சமூக ஆதரவுடன், RxJS உலகளவில் நவீன மற்றும் வலுவான வலைப் பயன்பாடுகளை உருவாக்குவதற்கான ஒரு முக்கிய கருவியாகத் தொடர்கிறது.